<template>
  <el-form-item>
    <el-button v-if="props.data.pid !== 0 && props.data.id !== undefined" type="primary" icon="Plus"
      @click="addDialog = true">添加作业</el-button>
  </el-form-item>
  <el-form :inline="true" size="small" v-if="props.data.pid !== 0 && props.data.id !== undefined">
    <el-table :loading="loading" :data="tableData" style="width: 98%;" size="small" row-key="id">
      <el-table-column>
        <template #default="scope">
          <div style="display: flex; flex-direction: column;">
            <p>第{{(pagination.currentPage-1)*pagination.pageSize+scope.$index+1}}题：</p>
            <div style="margin-left: 2em">{{ scope.row.homeworkTopic }}</div>
            <p>参考答案：</p>
            <div style="margin-left: 2em">{{ scope.row.homeworkAnswer }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="scope">
          <div style="display: flex; flex-direction: column; justify-content: center;">
            <el-link type="primary" icon="edit" style="margin-right: 10px" @click="showupdate(scope.row)">修改</el-link>
            <el-link type="primary" icon="delete" style="margin-right: 10px;color: red;"
              @click="del(scope.row)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block" style="margin-top: 20px">
      <el-pagination size="small" v-model:current-page="page" v-model:page-size="size" :page-sizes="[5, 10, 15, 20]"
        :total="pagination.total" :background="true" layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </el-form>
  <HomeworkAdd v-model:addDialog="addDialog" v-model:courseId="props.data.id" @loadData="loadTableData" />
  <HomeworkUp v-if="updateDialog" v-model:updateDialog="updateDialog" @loadTableData="loadTableData"
    :rowData="rowData" />
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import axios from "@/axios/index.js"
import { onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import HomeworkAdd from "./HomeworkAdd.vue";
import HomeworkUp from "./HomeworkUp.vue";

let tableData = reactive([])
let rowData = ref([])
let props = defineProps(["data"]);

onMounted(loadTableData);
watch(props, () => {
  loadTableData()
});

//切换java和前端课程之后的课程id

let loading = ref(false)
const page = ref(1) //当前页
const size = ref(5) //每页显示条数
let pagination = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 5
})
let addDialog = ref(false);
let updateDialog = ref(false);

function loadTableData() {

  loading.value = true;
  if (props.data.pid !== 0) {
    axios.get("/courseHomework/selectAll", {
      params: {
        current: pagination.currentPage,
        size: pagination.pageSize,
        courseId: props.data.id
      }
    }).then(resp => {
      tableData = resp.data.data.records;
      pagination.total = resp.data.data.total;
      loading.value = false;
    });
  }
}

function handleCurrentChange(page) {
  pagination.currentPage = page;
  loadTableData();
}

function del(row) {
  ElMessageBox.confirm(
    '是否删除该题目',
    '警告',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete('/courseHomework', {
        params: {
          id: row.id
        }
      }).then((resp) => {
        ElMessage({
          message: "删除成功",
          type: 'success',
          duration: 1500
        });
        loadTableData();
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      });
    });
}

function showupdate(row) {
  rowData.value = row;
  updateDialog.value = true;
}

function handleSizeChange(params) {
  pagination.pageSize = params
  loadTableData()
}

onMounted(() => loadTableData());
</script>

<style scoped lang="less">
.el-table {
  margin: auto;
}

.el-form-item {
  margin-left: 15px;
}
</style>